<template>
    <div ref="container"></div>
</template>

<script setup>
import * as THREE from 'three'    
import {ref, nextTick} from 'vue'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'

const container = ref(null);
const size = {
    width: window.innerWidth,
    height: window.innerHeight - 50
}

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, size.width / size.height, 0.1, 1000 );
camera.position.set(0, 0, 10);
scene.add(camera)

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

const renderer = new THREE.WebGLRenderer();
renderer.setSize( size.width, size.height);
nextTick(()=> {
    container.value.append( renderer.domElement )
})

/**
 * 添加一个3轴辅助线，红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴
 * new THREE.AxesHelper( size )
 * size: (可选的) 表示代表轴的线段长度. 默认为 1.
 */
const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

const controls = new OrbitControls( camera, renderer.domElement );
const render = ()=> {
    requestAnimationFrame(render)
    controls.update()
    renderer.render( scene, camera );
}
render()

</script>

<style scoped>

</style>